$tree-picker: (
  font-size: #{getCssVar(editor, default, text-size)},
);

@include b(tree-picker) {
  @include set-component-css-var('tree-picker', $tree-picker);

  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;

  @include e('search') {
    .el-input {
      --el-input-height: #{getCssVar('height-control', 'default')};
      --el-font-size-base: #{getCssVar('tree-picker', 'font-size')};

      margin: getCssVar('spacing', 'tight') 0;
    }
  }

  @include e('tree') {
    #{getCssVarName(font-size, regular)}: getCssVar('tree-picker', 'font-size');
    height: 100%;
    overflow: auto;

    .el-checkbox.el-checkbox.el-checkbox .el-checkbox__inner {
      width: getCssVar('tree-picker', 'font-size');
      height: getCssVar('tree-picker', 'font-size');
    }
  }
}